<template>
	<view class="tabbar ">
		<view class="ball bac-col-00b"
			:style="{position:'relative',left:ball,transform: `translate(${ballLeft}rpx, ${ballTop}rpx)`,transition: `${styleName} 0.2s ease-in-out`}">
		</view>
		<view class="tabber-funnel" :style="{
		      'transform': `translateX(${activeIndex === 0 ? 0 : (100 / (items.length * 2)) * activeIndex}%)`,
		    }">
		</view>
		<view class="tabber-con bottom-h">
			<view class="tabbar-items">
				<view v-for="(item, index) in items" :key="index" class="tabbar-item"
					:style="{width:100/items.length + '%'}" :class="activeIndex === index?'active col-00ba31':'default'"
					@click="handleTabClick(index)">
					<view class="tabbar-icon pos-rela" :class="item.isCenter ? 'center-icon' : ''">
						<view v-if="item.isCenter" class="center-plus">+</view>
						<image v-else class="tabbar-icon" :src="activeIndex === index?item.icon_select:item.icon_not"
							mode="aspectFill"
							:style="{ opacity: activeIndex === index?imageOpacity :1,transition: `opacity 0.4s ease-in-out`}" />
						<!-- 大于9条未读显示... -->
						<view v-if="messageCounts <= 9 && messageCounts > 0 && index === 3" class="num-box">
							{{messageCounts}}
						</view>
						<view v-else-if="messageCounts > 9 && index === 3" class="num-box-max">
						</view>
					</view>
					<text v-if="!item.isCenter">{{ item.label }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			items: {
				type: Array,
				default: true
			},
			messageCountObj: {
				type: Object,
				default: {
					circle: 0,
					activity: 0,
					system: 0
				}
			}
		},
		data() {
			return {
				ball: null,
				homePosition: 0,
				gap: 0, //上次位置与现在位置差值
				ballLeft: 0,
				ballTop: 0,
				styleName: 'transform',
				imageOpacity: 1, // 默认完全不透明
				activeIndex: 0,
				messageCounts: 0
			}
		},
		mounted() {
			this.ball = this.activeIndex === 0 ?
				(10 - 1) + '%' :
				(100 / this.items.length * this.activeIndex + (100 / this.items.length / 2) - 1) + '%'

		},
		watch: {
			messageCountObj(newVal) {
				// 累加
				this.messageCounts = newVal.circle + newVal.activity + newVal.system;
			}
		},
		methods: {
			handleTabClick(index) {
				// 震动
				uni.vibrateShort();
				this.$emit('tabClick', index);
				this.homePosition = this.activeIndex; // 保存上一次的位置
				this.activeIndex = index;
				this.styleName = 'transform';
				this.imageOpacity = 0.5;
				setTimeout(() => {
					this.imageOpacity = 1;
				}, 400); // 延时执行淡入
				this.gap = this.activeIndex - this.homePosition;
				this.ballTop = -45;
				this.ballLeft = 75 * this.gap
				setTimeout(() => {
					this.ballTop = 0;
					this.ballLeft = 75 * 2 * this.gap;
				}, 200)
				setTimeout(() => {
					this.styleName = 'width';
					this.ball = this.activeIndex === 0 ?
						(10 - 1) + '%' :
						(100 / this.items.length * this.activeIndex + (100 / this.items.length / 2) - 1) + '%'
					this.ballTop = 0;
					this.ballLeft = 0;
				}, 450)

			},
		}
	}
</script>

<style scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		z-index: 1000;
	}

	.tabber-funnel {
		height: 30rpx;
		width: 200%;
		position: relative;
		left: -750rpx;
		top: 2rpx;
		background: #ffffff;
		-webkit-mask-image: radial-gradient(circle at 55% -6%, transparent 16rpx, black 24rpx);
		transition: transform 0.4s ease-in-out
	}

	.tabber-con {
		display: flex;
		justify-content: space-around;
		width: 100%;
		background-color: #ffffff;
		padding-top: 2rpx;
	}

	.tabbar-items {
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tabbar-item {
		display: flex;
		text-align: center;
		flex-direction: column;
		align-items: center;
	}

	.tabbar-item.active {
		font-size: 22rpx
	}

	.tabbar-item.default {
		color: #b5b5b5;
		font-size: 22rpx
	}

	.tabbar-icon {
		width: 54rpx;
		height: 54rpx;
	}


	.ball {
		width: 16rpx;
		height: 16rpx;
		border-radius: 2000rpx;
		border: 2rpx solid #fff;
		margin-bottom: -10rpx;
	}

	.num-box {
		font-size: 18rpx;
		width: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 50%;
		background-color: #fd3613f2;
		color: #ffffff;
		position: absolute;
		right: -8rpx;
		top: -4rpx;
	}

	.num-box-max {
		width: 15rpx;
		height: 15rpx;
		line-height: 15rpx;
		border-radius: 50%;
		background-color: #fd3613f2;
		position: absolute;
		right: -1rpx;
		top: 2rpx;
	}

	/* 中间圆形发布按钮样式 */
	.center-icon {
		width: 120rpx !important;
		height: 120rpx !important;
		background: linear-gradient(135deg, #00ba31 0%, #14cc60 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -40rpx;
		box-shadow: 0 8rpx 20rpx rgba(20, 204, 96, 0.3);
		border: 4rpx solid #ffffff;
		transition: all 0.3s ease;
	}

	.center-icon:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 12rpx rgba(20, 204, 96, 0.4);
	}

	.center-plus {
		font-size: 60rpx;
		font-weight: 300;
		color: #ffffff;
		line-height: 1;
		text-align: center;
	}
</style>